<template>
  <div class="edit-dialog">
    <el-dialog
      v-model="dialog"
      class="dialog"
      @close="handleClose"
      :close-on-click-modal="false"
      width="900px"
      :title="dialogTitle"
    >
      <div class="dialog-content">
        <el-form
          :model="ruleForm"
          :disabled="type == 3"
          :rules="rules"
          label-width="auto"
          label-position="right"
          ref="formRef"
        >
          <el-form-item label="语言" prop="language">
            <el-radio-group v-model="ruleForm.language">
              <el-radio-button label="中文" value="CN" />
              <el-radio-button label="英文" value="EN" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="下载类型" prop="type">
            <el-radio-group v-model="ruleForm.type">
              <el-radio-button label="产品说明书" value="PRODUCT_MANUAL" />
              <el-radio-button label="WEB端说明书" value="WEB_MANUAL" />
              <el-radio-button label="PC端说明书" value="PC_MANUAL" />
              <el-radio-button label="PC端软件工具" value="PC_TOOLS" />
              <el-radio-button label="小程序说明书" value="WECHAT_MANUAL" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="发布状态" prop="state">
            <el-radio-group v-model="ruleForm.state">
              <el-radio-button label="草稿" value="DRAFT" />
              <el-radio-button label="发布" value="PUBLISHED" />
              <el-radio-button label="下线" value="OFFLINE" />
            </el-radio-group>
          </el-form-item>
          <el-form-item label="文件" prop="downloadUrl">
            <UploadFile
                    v-if="editDialog"
                    ref="uploadFileRef"
                    :fileList="downloadFileList"
                    @addFile="addFile"
                    @updateFileList="updateFileList"
                    :type="type"
                    :limit="1"
                    style="min-width: 230px;text-align: left"
            />
          </el-form-item>
          <el-form-item label="简介" prop="description">
            <el-input
              v-model="ruleForm.description"
              type="textarea"
              style="width: 100%"
              maxlength="200"
              placeholder="请输入简介"
              rows="3"
              show-word-limit
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="type != 'detail'">
        <span class="dialog-footer">
          <el-button
            type="primary"
            v-if="type != DialogType.detail"
            @click="submit"
            >确定</el-button
          >
          <el-button plain @click="handleClose">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { reactive, onMounted, toRefs, computed, watch, nextTick } from "vue";
import UploadImg from "@/components/UploadImg.vue";
import UploadFile from "@/components/UploadFile.vue";
import { addApi, updateApi } from "@/api/download";
import { DialogType, DownloadType, PublishState } from "@/utils/types";
import { getImg } from "@/api/common";
import Editor from "@/components/Editor.vue";
import { ElMessage } from "element-plus";
export default {
  name: "edit",
  components: { UploadImg, Editor, UploadFile },
  props: {
    formData: Object,
    editDialog: Boolean,
    type: Number,
  },
  setup(props, context) {
    let state = reactive({
      userList: [],
      selectUsersId: [],
      dialogTitle: "",
      formRef: null,
      previewList: [],
      rules: {},
      showVideo: false,
      ruleForm: {},
      uploadImgRef: null,
      fileList: [],
      downloadFileList: [],
      rules: {
        language: [{ required: true, message: "此项为必填项" }],
        type: [{ required: true, message: "此项为必选项" }],
        name: [{ required: true, message: "此项为必填项" }],
        description: [{ required: true, message: "此项为必填项" }],
        state: [{ required: true, message: "此项为必填项" }],
        downloadUrl: [{ required: true, message: "请上传文件"  }],
      },
    });
    let dialog = computed(() => props.editDialog);
    watch(dialog, (newValue) => {
      if (newValue) {
        state.showVideo = true;
      } else {
        state.showVideo = false;
      }
      if (dialog) {
        if (props.type == DialogType.add) {
          state.dialogTitle = "新增";
          state.ruleForm = {
            language: "CN",
            type: "PRODUCT_MANUAL",
            state: "PUBLISHED",
          };
          state.ruleForm.status = "ENABLE";
          state.fileList = [];
        }
        if (props.type == DialogType.edit) {
          state.dialogTitle = "修改";
          state.ruleForm = props.formData;
          setFileList();
          state.downloadFileList = [{
            name: state.ruleForm.name,
            url: state.ruleForm.downloadUrl,
          }]
        }
        if (props.type == DialogType.detail) {
          state.ruleForm = props.formData;
          state.dialogTitle = "查看";
        }
      } else {
        state.ruleForm = {};
      }
    });
    onMounted(() => {});
    const setFileList = () => {
      state.fileList = [];
      for (let i = 0; i < state.ruleForm.imageKeys.length; i++) {
        const e = state.ruleForm.imageKeys[i];
        getImg(e).then((res) => {
          if (res["code"] == 200) {
            state.fileList.push({
              url: res.value,
              key: e,
            });
          }
        });
      }
    };
    const addImgKey = (key) => {
      if (state.ruleForm.imageKeys && state.ruleForm.imageKeys.length > 0) {
        state.ruleForm.imageKeys.push(key);
        setFileList();
      } else {
        state.ruleForm.imageKeys = [key];
        setFileList();
      }
    };
    const addFile = (fileInfo) => {
      state.ruleForm.downloadUrl = fileInfo.url;
      state.ruleForm.downloadKey = fileInfo.key;
      state.ruleForm.name = fileInfo.name;
    };
    const updateFileList = () => {
      state.ruleForm.downloadUrl = '';
    };
    const submit = () => {
      nextTick(() => {
        state.formRef.validate((valid, fields) => {
          if (!state.formRef) return;
          if (valid) {
            if (props.type == 1) {
              //创建
              addApi(state.ruleForm).then((res) => {
                handleClose();
                context.emit("getListFun");
              });
            }
            if (props.type == 2) {
              //修改
              updateApi(state.ruleForm).then((res) => {
                handleClose();
                context.emit("getListFun");
              });
            }
          }
        });
      });
    };
    const handleClose = () => {
      context.emit("changeDialog", false);
    };
    const updateValue = (val) => {
      state.ruleForm.content = val;
      console.log("updatev");
    };
    return {
      ...toRefs(state),
      dialog,
      submit,
      handleClose,
      DialogType,
      addImgKey,
      updateValue,
      addFile,
      updateFileList,
    };
  },
};
</script>
<style lang="scss" scoped></style>
